<template>
  <!--在线通知-->
  <div class="col-md-12">
    <div class="module Online-notification">
      <section class="module-header">
        <h1>在线通知</h1>
        <a class="mesOnline-queryAll" href="#" onclick="mesOnlineAll()">查看全部&gt;</a>
        <button class="btn btn-default"  @click="queryAllWaybill()">刷新</button>
        <div  class="form-group query-box stopevent">
          <input v-model="searchWeyBill" type="text" class="waybill form-control check-formControl" placeholder="输入单号过滤" @input="OnlineInputClearShow(this)">
          <a class="input-clean-btn" role="button" style="margin-top: -6px" v-show="cleanBtn" @click="OnlineclearInputVal"></a>
          <a role="button" class="searthWaybtn query-btn" @click="queryOnlineMes(2)"><i class="fa fa-search"></i></a>
        </div>
      </section>
      <div class="row Online-notification_row" v-show="onlineDate">
        <!--在线通知表-->
        <div class="col-md-8">
          <div class="module-content">
            <div class="data_border_box data_border_box_online">
              <Table :content="self" :columns="formTitle" :data="formData" :show-header="false" ref="table" @on-row-click="putValueIntoYXY" @on-select="selectDate" @on-select-cancel="selectCancelDate"></Table>
            </div>
          </div>
        </div>
        <!--受理备注 -->
        <div class="col-md-4 ">
          <section class="accept_remark">
            <p class="yxy_find_content" :title="context">{{context}}</p>
            <p>受理备注：</p>
          </section>
          <div class="note_input">
            <textarea v-model="remarks" class="note_input_content" placeholder="请在这里输入内容....."></textarea>
          </div>
          <div class="note_button">
            <button class="btn btn-default table_button " @click="submitOnlineMes('Y')">同意</button>
            <button class="btn btn-danger btn-primary table_button"  @click="submitOnlineMes('N')">拒绝</button>
          </div>
        </div>
      </div>
      <!--在线通知数据空时-->
      <div class="data-null-row" v-show="onlineNull">
      </div>
    </div>
  </div>
</template>

<script>
  var checkedboxdata;
  var uapbeforetime;
  export default {
        name: "online-notice",
        data(){
            return{
                dataNull:true,
                self: this,
                onlineDate:false,
                onlineNull:true,
                formTitle:[
                    {type: 'selection', width:20,},
                    { type:'index',align:'center',width:35},
                    {key:"waybillNo",className:"td3",width:90,ellipsis:true,
                        render:function (h,params) {
                            return h('p' ,{
                                domProps: {
                                    title: params.row.waybillNo
                                },
                                style: {
                                    width:'80px',
                                    textOverflow: "ellipsis",
                                    whiteSpace: 'nowrap',
                                    overflow: 'hidden',
                                    color: '#3a8be9'
                                }
                            },params.row.waybillNo)
                        }
                    },
                    { key:"sendOrgName",width:150 ,ellipsis:true,
                    render:function (h,params) {
                        return h('p' ,{
                            domProps: {
                                title: params.row.sendOrgName
                            },
                            style: {
                                width:'130px',
                                textOverflow: "ellipsis",
                                whiteSpace: 'nowrap',
                                overflow: 'hidden'
                            }
                        },params.row.sendOrgName)
                    }
                    },
                    {key:'status',width:70,
                        render:(h,params) =>{
                          return h("div", {
                                  style: {
                                      color: '#fff',
                                      background: '#3a8be9',
                                      border: '1px solid #3a8be9',
                                      borderRadius: '3px',
                                      padding:'0px 2px',
                                      width: '50px',
                                      height: '20px',
                                      fontSize: '11px',
                                      textAlign:'center'
                                  }
                              }
                              ,'未处理');
                         }
                     },
                    { key:"createTime",width:140,
                        render: function (h, params) {
                            let time = new Date(Number(this.row.createTime)).format('yyyy-MM-dd hh:mm');
                          return("div",[ h('img' ,{
                              domProps: {
                                  align: 'center',
                                  src: require('../../assets/clock.png'),
                              },
                              style: {
                                  width:'15px',
                                  marginTop:"-3px"
                              }
                          }),h("div",{style:{display:"inline-block"}},time)])
                        }
                    },
                    {
                        key: "sendUserName",width:70,ellipsis:true
                    }
                ],
                formData:[],
                context:"",
                remarks:"",
                searchWeyBill:"",
                cleanBtn:false
            }
        },
        mounted(){
            this.queryOnlineMes(1);
        },
        methods: {
            /**
             查询在线通知
             */
            queryOnlineMes(wstr){
                    new Promise((resolve,reject) =>{
                    var onlineMesStr;
                    if (wstr == 1) {
                        onlineMesStr = {
                            'msgOnlineVo.msgOnlineEntity.receiveOrgCode': userInfo.optDeptCode,    // 'W0000012721'
                            'msgOnlineVo.msgOnlineEntity.acceptStatus': 'G',
                            'page': '1',
                            'start': '0',
                            'limit': '20'
                        };
                    } else {
                        var waybillOnlineMes = this.searchWeyBill;
                        onlineMesStr = {
                            'msgOnlineVo.msgOnlineEntity.receiveOrgCode': userInfo.optDeptCode,// 'W011302020515'  userInfo.deptCode
                            'msgOnlineVo.msgOnlineEntity.acceptStatus': 'G',
                            'msgOnlineVo.msgOnlineEntity.waybillNo': waybillOnlineMes,
                            'page': '1',
                            'start': '0',
                            'limit': '20'
                        };
                    }
                    this.axios.post(FOSS_BASE_MUL_PATH + "bse-querying-web/querying/queryMsgByBillNo.action",onlineMesStr).then(response => {
                        if ((response.data.msgOnlineVo == undefined || response.data.msgOnlineVo.msgOnlineEntitys.length == 0) && wstr == 1) {
                            this.onlineDate = false;
                            this.onlineNull = true;
                        } else if ((undefined == response.data.msgOnlineVo || 0 == response.data.msgOnlineVo.msgOnlineEntitys.length) && wstr == 2) {
//                            checktip($('.waybill'), '无此运单未处理的在线通知');
                            console.log('无此运单未处理的在线通知');
                        } else {
                            this.onlineNull = false;
                            this.onlineDate = true;
                            this.formData = response.data.msgOnlineVo.msgOnlineEntitys;
                            this.context = response.data.msgOnlineVo.msgOnlineEntitys[0].context;

                        }
                        resolve();
                    }).catch(error => {
                        console.log(error);
                        reject();
                    });
                    });
            },
            putValueIntoYXY(index){
                this.context = index.context;
            },
            selectDate(selection){
                checkedboxdata = selection;
            },
            selectCancelDate(selection){
                checkedboxdata = selection;
            },
            submitOnlineMes(isAccept){
                var msgOnlineEntity =  this.checkedMesData(isAccept);

                var msgOnlineEntitysdata = {
                    'msgOnlineEntitys': msgOnlineEntity
                };
                var msgOnlineVodata = {
                    'msgOnlineVo': msgOnlineEntitysdata
                };
                var msgOnlineVocss = JSON.stringify(msgOnlineVodata);
                  console.log(typeof msgOnlineVodata,msgOnlineVodata);
                this.axios.axios({url:FOSS_BASE_MUL_PATH+"bse-baseinfo-web/baseinfo/updateBatchMsgByBillNo.action",headers: {
                    'Content-Type': 'application/json;charset=UTF-8'
                },data:msgOnlineVocss}).then(response =>{
                    if(response.data.success){
                        this.queryOnlineMes(1);
                    }else{
                        console.log("调用失败：");
                    }
                }).catch(error =>{
                    console.log(error);
                });
            },
            checkedMesData(cssswitch){
                var acceptMes = this.remarks;
                var a = new Array();
                for(var dataindex of checkedboxdata){
                    dataindex.acceptStatus=cssswitch;
                    dataindex.remarks=acceptMes;
                    a.push(dataindex);
                };
                return a;
            },
            // 清除按钮出现
            OnlineInputClearShow(obj) {
                if (this.searchWeyBill.length > 0) {
                    this.cleanBtn = true;
                }else{
                    this.cleanBtn = false;
                    this.queryOnlineMes(1);
                }
            },

            // 点击清除按钮
            OnlineclearInputVal(obj) {
                this.searchWeyBill = "";
                this.cleanBtn = false;
                this.queryOnlineMes(1);
            },
            queryAllWaybill(){

                var uapthistime = new Date();

                var uapbooltime = this.css_time(uapbeforetime,uapthistime);

                if(uapbooltime>10){
                    uapbeforetime = uapthistime;
                    this.queryOnlineMes(1);
                }else{
                    console.log("在线通知手动刷新10秒间不能连续触发~");
                }
            },
            css_time(timea,timeb){
                var csstime = 11;
                if(timea != undefined){
                    csstime = Math.abs(parseInt((timeb - timea)/1000));
                }
                return csstime
            }
         }
        }
</script>

<style>
  .Online-notification .ivu-table table{
    width:100%!important;
  }
  .Online-notification .ivu-table td, .ivu-table th {
    min-width: 0;
    height: 32px!important;
    box-sizing: border-box;
    text-align: left;
    text-overflow: ellipsis;
    vertical-align: middle;
    border-bottom: 0;
  }
  .Online-notification .ivu-table-cell {
    padding-left: 0px!important;
    padding-right: 18px;
  }
  .Online-notification .ivu-table:before,
  .Online-notification .ivu-table:after{
    background-color: transparent;
  }
  .Online-notification .ivu-table-cell:hover{
    cursor: default;
  }
  .Online-notification .ivu-table-wrapper{
    border: 0px!important;
  }
  .td3{
    color: #3a8be9;
    textAlign:'center'
  }
  .Online-notification .ivu-table td{
    background-color: transparent!important;
  }
  .Online-notification .ivu-table td:nth-child(1) .ivu-table-cell{
   width: 50px;
  }
  .Online-notification .ivu-table tr:nth-child(2n+1){
    background-color: #F5F5F5;
  }
  .Online-notification .ivu-table tr:hover{
    background-color: #c8e4fa;;
  }
  .Online-notification .ivu-table td:nth-child(2) .ivu-table-cell{
    padding-right: 0px;
    max-width: 35px;
  }
  .Online-notification .ivu-checkbox-inner{
    border-radius: 0px;
  }
  .Online-notification .ivu-checkbox:hover .ivu-checkbox-inner{
    border: 1px solid #3a8be9;
  }
  .Online-notification .ivu-table-body{
    overflow: hidden;
  }
  .Online-notification .input-clean-btn{
    top: 6px;
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
    right: 25px;
    background: url("../../../static/resources/img/cross-sm.png") no-repeat center;
  }
  .Online-notification{
    width:100%;
    padding:0 16px 0 10px;
  }
  .Online-notification .module-header .btn-default{
    width: 40px;
    height: 20px;
    margin-left: 5px;
    padding: 0;
    text-align: center;
    line-height: 1;
    font-size: 12px;
    border-radius: 3px;
    margin-top: -4px;
  }
  .Online-notification_row{
    border-top: 1px solid #d2d6de;
    margin-left: 10px;
    /*display: none;*/
    margin-bottom: 15px;
  }
  .Online-notification_row .module-content{
    width: 100%;
  }
  .Online-notification_row .col-md-8{
    padding-left: 0px;
    padding-right: 0px;
  }
  .Online-notification_row .col-md-4{
    padding-right: 0px;
  }
  .data-null-row {
    width: 100%;
    text-align: center;
    height: 180px;
    border-top: 1px solid #d2d6de;
    background: url("../../../static/resources/img/onlineNull.png")no-repeat center;
  }
  .Online-notification .module-header{
    height: 48px;
    padding-right: 0px;
  }
  .Online-notification .module-header .query-box{
    float: right;
    clear: right;
  }
  .Online-notification .module-header .form-control{
    height: 17px;
  }
  .Online-notification .module-header .query-btn{
    margin-top: -4px;
  }
  .query-box:hover{
    cursor: pointer;
  }
  .accept_remark{
    margin-bottom: 5px;
    width:100%;
  }
  .note_input textarea{
    overflow:hidden;
    resize:none;
    width: 100%;
    height: 81px;
    border-radius: 8px;
    border: 1px solid #b2b2b2;
    margin-bottom: 14px;
  }
  .note_button{
    text-align: right;
    width: 100%;
  }
  .Online-notification .module-header .query-box .form-control {
    width: 200px;
    border: 0;
    border-bottom: 1px solid #ccc;
  }
  .yxy_find_content{
    margin-top: 4px;
    height: 35px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 18px;
    margin-bottom: 6px;
    font-size: 13px;
  }
  .yxy_find_content:hover{
    cursor: default;
  }
  .Online-notification .data_border_box_online{
    overflow-y:auto;
    height: 165px;
    border-radius: 5px;
    border-bottom: 1px solid #d2d6de;
  }

</style>
